
<template>
  <el-table :data="list" style="width: 100%">
    <el-table-column label="选择" width="55">
        <template #default="scope">  <el-checkbox v-model="scope.row.state"  size="large" @change="changeHandle(scope.$index)" :disabled="scope.row.state"/></template>
    </el-table-column>
    <el-table-column label="编号" width="130">
        <template #default="scope">{{ scope.row.id }}</template>
    </el-table-column>
        <el-table-column  label="待办事项" width="250" >
    <template #default="scope">{{ scope.row.content }}</template>
    </el-table-column>
        <el-table-column  label="创建时间" width="120" >
    <template #default="scope">{{ scope.row.startDate }}</template>
    </el-table-column>
        <el-table-column  label="完成时间" width="120" >
    <template #default="scope">{{ scope.row.finishDate }}</template>
    </el-table-column>
        <el-table-column fixed="right" label="删除" min-width="60">
      <template #default="scope">
        <el-button
          link
          type="primary"
          size="small"
          @click.prevent="deleteRow(scope.$index)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { ElMessageBox } from 'element-plus'
export default{
    props:{list:Array},
    data(){
      return{
        list1:this.list
      }
    },
    methods:{
      changeHandle(i){
        ElMessageBox.confirm(
          '此项任务真的完成了吗？',
          'Warning',
          {
            confirmButtonText: '确定',
            cancelButtonText: '手抖了',
            type: 'warning',
          }
        )
          .then(() => {
           //当点击确定后触发的事件写在这里
           //把当前点击的行的下标传递给父组件
           this.$emit('changeD',i)
          })
          .catch(() => {
            //当点击手抖了后触发事件写在这里
            //把state重新改为false
            this.list1[i].state=false



          })
      },
      deleteRow(i){
        ElMessageBox.confirm(
          '确定要删除吗？',
          'Warning',
          {
            confirmButtonText: '确定',
            cancelButtonText: '手抖了',
            type: 'warning',
          }
        )
          .then(() => {
           //当点击确定后触发的事件写在这里
           //把当前点击的行的下标传递给父组件
           this.$emit('del',i)
          })
          .catch(() => {
            //当点击手抖了后触发事件写在这里
            
          })
      }
    }      //从父组件接收数据
}

</script>